<template>
	<view class="">
		<view v-for="(item,index) in lists" :key="index">
			<view :class="[isTop?'correlation-list':'correlation-list2']">
				<view class="correlation-info">
					<view :class="['u-flex u-row-between list',Cur==item.jh.ID ? 'active' :'']"
						@click="goDetail(item.jh.ID)">
						<view class="u-flex name" @click.stop="getChildren(index)">
							<view class="u-m-l-5">{{item.mo.YGXM}} ( {{item.bm.JGMC}} )</view>
							<u-icon :name="item.isOpen ? 'arrow-up-fill' : 'arrow-down-fill' " color="#C5C5C5" size="16"
								class="u-m-l-10"></u-icon>
						</view>
						<u-icon name="arrow-right" color="#C5C5C5" size="22" class="u-m-l-40 u-m-r-40"></u-icon>
					</view>
					<view v-if="item.isOpen">
						<view v-if="item.Children.length>0">
							<tree-list :list="item.Children"></tree-list>
						</view>
						<view v-else class="no-data">暂无数据</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import treeList from '@/packagePlan/components/treeList/index.vue';

	export default {
		name: 'treeList',
		components: {
			treeList
		},
		props: {
			list: {
				type: Array,
				default: []
			},
			isTop: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				lists: this.list,
				Cur: null,
			}
		},
		methods: {
			getChildren(e) {
				const idx = e;
				let arr = this.lists || []
				let info = arr[idx] || {};
				this.Cur = info.jh.ID;
				info.isOpen = !info.isOpen;
				if (!info.Children || info.Children.length == 0) {
					this.getList(info.jh.ID).then(res => {
						info.Children = res;
						this.lists = arr
					})
				}
			},
			getList(id) {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					this.$minApi.app._GetXJJHID({
						SJJHID: id
					}).then(res => {
						uni.hideLoading();
						const datas = res.data.model || [];
						datas.forEach(item => {
							item.isOpen = false;
							item.Children = [];
						})
						resolve(datas);
					}).catch(() => {})
				})
			},
			goDetail(id) {
				this.Cur = id;
				uni.navigateTo({
					url: '/packagePlan/pages/correlationDetail/index?planID=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.correlation-list {
		font-size: 26rpx;

		.correlation-info {
			position: relative;

			// padding-left: 20rpx;
			.list {
				padding-left: 20rpx;
				min-height: 80rpx;
				border-bottom: 1px solid rgba($color: #e5e5e5, $alpha: 0.5);

				&.active {
					color: #2A8FFC;
				}

				&.active-bar {
					background-color: #2A8FFC;
					color: #fff;
				}

				.name {
					min-height: 80rpx;
				}
			}
		}

	}

	.lisssss {}

	.correlation-list2 {
		font-size: 26rpx;
		background: #EEF2F5;
		color: #666;

		.correlation-info {
			position: relative;
			padding-left: 25rpx;

			.list {
				min-height: 80rpx;
				border-bottom: 1px solid rgba($color: #e5e5e5, $alpha: 0.5);

				&.active-2 {
					color: #2A8FFC;
				}

				&.active-bar {
					background-color: #2A8FFC;
					color: #fff;
				}
			}
		}
	}

	.no-data {
		text-align: center;
		color: #999;
		padding: 20rpx 0;
		background: #EEF2F5;
	}
</style>